@import url('./mn-el.css'); /* color variables 颜色变量 */
:root {
  --primary-color: #ff2e4d;

  --background-color: #fffffffa;
  --background-color-dark: rgba(0, 0, 0, 0.05);

  --text-color: #333333cc;
  --text-color-dark: #333333;

  --border-color: rgba(0, 0, 0, 0.1);
}

/* size variables 媒体尺寸 */
:root {
  --media-width-pc: 1200px;
  --media-width-pad: 960px;
  --media-width-phone: 695px;

  --gap-width-5: 32px;
  --gap-width-4: 24px;
  --gap-width-3: 24px;
  --gap-width-2: 16px;
}

/* button size variables 按钮尺寸 */
:root {
  --button-height: 40px;
  --button-height-large: 48px;

  --button-padding: 0 16px;
  --button-padding-large: 0 24px;

  --button-border-radius: 100px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-size: 16px;
}

html {
  scroll-behavior: smooth;
}

body {
  width: 100%;
  height: 100vh;
  color: var(--text-color);
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
}

a {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

svg {
  width: 20px;
  height: 20px;
}

button {
  outline: none;
  border: none;
  color: var(--text-color);
}

button:hover {
  cursor: pointer;
}

input {
  outline: none;
  border: none;
  caret-color: var(--primary-color);
}

#app {
  width: 100%;
  height: 100%;
  min-width: 375px;
}

/* ///////////////////////////////////////////////// */
.overflow-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.star-active {
  color: rgb(255, 175, 1);
}

.like-active {
  fill: red;
}
